<template>
  <!------------------------------------ 商品列表 ------------------------------------
    @desc 包含商品管理列表，快速下单商品列表，核销商品列表
    @author kyle
    @date 2021-03-05
    @props
      productList  ———— 商品列表数据
      purchaseList ———— 供应商列表
      listType     ———— 列表类型
      sortable     ———— 是否可排序
      typeObj      ———— 采购下单搜索type
    @method
      editDetail    ———— 编辑商品
      goDetail      ———— 进入详情
      showSpec      ———— 显示规格弹窗
      updateCart    ———— 更新购物车
  -->
  <div>
    
    <div v-show="!sortable">
      <!-- 商品管理页面列表 -->
      <ul >
        <li v-for="(item, index) in productList" :key="index" class="bg-white productItem" >
          <div class="flex">
            <img-box class="is-130 br-10 flex-s-0" :img-url="item.logo" />
            <div class="productItem-detail ml-20 flex-1">
							<div class="css-name">
								 <p class="text-show-line-2 mb-10" :class="item.ProductStatusName === '下架' ? 'color-gray-light' : ''">
									{{ item.Name }}
									</p>
									<p class="text-show-line-2 mb-10" :class="item.ProductStatusName === '下架' ? 'color-gray-light' : ''">
										桌型：{{ item.TypeModeName }}
									</p>
								<p class="productItem-p-left" @click="opencode(item)">查看桌码</p>
							</div>
							<div class="css-status">
								<div class="fs-22  color-primary">{{ item.StateName }}</div>
								<div class="productItem-p-right bg-primary color-white lh-42 plr-20 br-21" @click.stop="editDetail(item.ID)">编辑</div>
            	</div>
            </div>
          </div>
        </li>
      </ul>
			
		<!-- 桌码弹窗 -->
		<van-dialog v-model="showcode" class="posterDiv" :showConfirmButton="false" width="80%">
			<div class="poster_main pos-r bg-white bblr-32 bbrr-32">				
				<SvgIcon icon-class="close" class="fs-60 pos-a closecss z-out color-dark" @goPage="closeQrcode" />
				<div class="qrcode" id="qrcode" ref="qrCode"><img class="is-200" :src="replaceImg"/></div>
			</div>
		</van-dialog>
    </div>
		<div v-show="sortable">
			<draggable  v-model="activeProductList" >
			<div v-for="(item, index) in activeProductList" :key="index" class="bg-white productItem">
				<div class="flex">
					<img-box class="drag-item is-130 br-10 flex-s-0" :img-url="item.logo" />
					<div class="productItem-detail ml-20 flex-1">
						<div class="css-name">
								<p class="text-show-line-2 mb-10">{{ item.Name }}</p>
								<p class="text-show-line-2 mb-10">桌型：{{ item.TypeModeName }}</p>
								<p class="productItem-p-left" @click="opencode(item)">查看桌码</p>
							</div>
          	</div>
					<div class="upDown-box">
						<svg-icon v-show="index !== 0" icon-class="up" class="fs-38 up" @goPage="up(index)" />
						<svg-icon v-show="index !== productList.length - 1" icon-class="down" class="fs-38 down" @goPage="down(index)" />
					</div>
				</div>
			</div>
		</draggable>
		</div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import QRCode from 'qrcodejs2'
import SvgIcon from 'components/SvgIcon'
import draggable from 'vuedraggable'
export default {
  name: 'TableList',
  components: {
    imgBox,SvgIcon,draggable
  },
  props: {
    productList: {
      type: Array,
      required: true
    },
    purchaseList: {
      type: Array,
      required: false,
      default: function() {
        return []
      }
    },

    sortable: {
      type: Boolean,
      default: false
    },
    showTab: {
      type: Boolean,
      default: false
    },
    typeObj: {
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      showcode:false,
			code:'',
			replaceImg: '',
			qrcode : '',
			activeProductList: ''
    }
  },
  computed: {},
  created() {
		this.activeProductList = JSON.parse(JSON.stringify(this.productList))
	},
	watch: {
		productList(newVal, oldVal) {
			if(newVal){				
				this.activeProductList = newVal
			}
		}
	},
  methods: {
		opencode(item){
			console.log(item,'chak')
			this.showcode = true
			let url = this.$LocalDomain +  "/circle/#/orderMeal/" +  item.StoreId + '&Name=' + item.Name
			this.$nextTick(()=>{
				 this.creatQrCode(url)
			})
		},
		creatQrCode(url) {
			console.log(this.$LocalDomain,url,"url")
      this.$refs.qrCode.innerHTML = ''
      var qrcode = new QRCode(this.$refs.qrCode, {
        text: url, // 需要转换为二维码的内容
        width: 185,
        height: 185,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
		replaceToImg() {
      setTimeout(() => {
        html2canvas(this.$refs.imgContent, {
          backgroundColor: null,
          allowTaint: false,
          logging: false, // 日志开关，便于查看html2canvas的内部执行流程
          width: 200, // dom 原始宽度
          height: 200,
          scrollY: 0,
          scrollX: 0,
          scale: window.devicePixelRatio,
          useCORS: true // 图片跨域
        }).then((canvas) => {
          const url = canvas.toDataURL('image/png')
          this.replaceImg = url
          this.$forceUpdate()
        })
      }, 200)
    },
		 // 为了防止重复生成二维码，使用置空
		 closeQrcode() {
				this.showcode = false
				setTimeout(function(){
						this.replaceImg = ''
				},150)
		},
    // 编辑商品
    editDetail(id) {
      //console.log(this.type)
      this.$emit('editDetail', id)
    },
		up(index) {
      const list = this.$utils.arraySort(index, 'up', this.productList)
      if (list) {
        this.productList = list
        this.$forceUpdate()
      }
    },
    down(index) {
      const list = this.$utils.arraySort(index, 'down', this.productList)
      if (list) {
        this.productList = list
        this.$forceUpdate()
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  flex: 1;
  font-size: 24px;
  line-height: 70px;
}
.list-item-active {
  background: $colorF;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 4px;
    bottom: 10px;
    left: calc(50% - 20px);
    @include bg-primary;
    border-radius: 2px;
  }
}
.left-active {
  border-top-right-radius: 10px;
  &:after {
    content: '';
    position: absolute;
    right: -26px;
    top: 0;
    width: 0;
    height: 0;
    border-right: 30px solid transparent;
    border-bottom: 70px solid $colorF;
  }
}
.right-active {
  border-top-left-radius: 10px;
  &:after {
    content: '';
    position: absolute;
    left: -26px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-bottom: 70px solid $colorF;
  }
}

.productItem {
  padding: 32px 22px;
  position: relative;
  z-index: 1;
  &:not(:last-child) {
    margin-bottom: 2px;
  }
  .right-arrow {
    position: relative;
    &:after {
      content: '';
      position: absolute;
      top: 40px;
      right: 0;
      width: 20px;
      height: 20px;
      border: 2px solid;
      border-color: $colorC $colorC transparent transparent;
      transform: rotate(45deg);
    }
  }
  .item-store {
    width: 170px;
    margin-right: 40px;
    .item-store-btn {
      position: relative;
      margin: 20px auto 0;
      font-size: 20px;
      line-height: 34px;
      border-radius: 17px;
      padding: 0 30px 0 20px;
      @include color-primary;
      display: inline-block;
      border: 1px solid currentColor;
      &:after {
        content: '';
        position: absolute;
        top: 8px;
        right: 15px;
        width: 10px;
        height: 10px;
        border: 2px solid;
        border-color: currentColor currentColor transparent transparent;
        transform: rotate(45deg);
      }
    }
  }
  .item-product {
    margin-right: 10px;
    display: none;
    &:first-child,
    &:nth-child(2) {
      display: block;
    }
  }
}
.productItem-1 {
  padding: 0 22px;
  margin-top: 32px;
}

.sortable-chosen {
  box-shadow: 0 0 20px #ccc;
  z-index: 2;
  margin: 0 4px;
}
.left-money {
  padding-left: 16px;
  position: relative;
  &:before {
    content: '￥';
    position: absolute;
    bottom: 4px;
    font-size: 24px;
    font-weight: 500;
    left: -4px;
  }
}
.productItem-detail {
	display: flex;
	justify-content: space-between;
	.productItem-p-left {
		color: #FDB52A;
	}
  .tel-text{
    color: $colorF;
    @include bg-primary;
    padding: 10px 20px;
    border-radius: 28px;
  }
  .select-box {
    display: inline-block;
    position: relative;
    padding: 0 36px 0 13px;
    line-height: 30px;
    font-size: 20px;
    border-radius: 15px;
    border: 1px solid currentColor;
    &:after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      top: 5px;
      right: 10px;
      border: 1px solid;
      border-color: transparent currentColor currentColor transparent;
      transform: rotate(45deg);
    }
    .select-item-box {
      position: absolute;
      left: 0;
      color: $color3;
      width: auto;
      background: rgba(0, 0, 0, 0.1);
      z-index: 100;
      p {
        padding-left: 13px;
      }
    }
  }
}
.upDown-box {
  position: absolute;
  bottom: 32px;
  right: 22px;
  width: 110px;
  height: 40px;
  .up {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .down {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.btn-input-box {
  position: relative;
  margin: 0 4px;
  &:before {
    background: transparent;
  }
  .btn-input {
    position: relative;
    z-index: 1;
    height: 42px;
    width: 50px;
    line-height: 1;
    border: none;
    text-align: center;
  }
}
.bottom-popup {
  border-radius: 40px 40px 0 0;
}

.css-peomain{
	background: white;
	width: 500px;
	height: 500px;
}
.css-icon{
	width: 100%;
	height: 100%;
}
.css-name{
	width: calc(100% - 140px);
}
.css-status{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	width: 130px;
}

.closecss {
			top: 20px;
			right: 16px;
			width: 50px;
			height: 50px;
    }

    .poster_main {
        text-align: center;
        padding: 62px 60px 62px;

        img {
            width: 450px;
            height: 450px;
        }

        p {
            font-size: 28px;
            color: #F54F1B;
            padding: 30px 0;
            font-weight: 500;
        }

        div {
            font-size: 28px;
            color: #333;
            font-weight: 400;
        }
    }

    /deep/.posterDiv {
        background-color: transparent;
    }
		/deep/.qrcode  {
        padding: 20px;
    }
</style>
